Description

The following is describes how to do simple ajax validation in webwork.

This requires DWR servlet being setup, dojo and the ajax theme being used.
In the Ajax theme, dwr is used for normal validation while dojo everything else (widgets, XHR, browser JS events etc.)
In order for validation to function properly it is advised to used standard WebWork Tags.
A description of the internal working of Ajax Validation using DWR could be found here.

Setup DWR

DWR could be setup by having the following dwr configuration (dwr.xml) at /WEB-INF/ directory. If it needs to be in other places, refer to http://getahead.ltd.uk/dwr/ for more information.

<!DOCTYPE dwr PUBLIC 
	"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" 
	"http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
    <allow>
        <create creator="new" javascript="validator">
            <param name="class" value="com.opensymphony.webwork.validators.DWRValidator"/>
        </create>
        <convert converter="bean" match="com.opensymphony.xwork.ValidationAwareSupport"/>
    </allow>

    <signatures>
        <![CDATA[
        import java.util.Map;
        import com.opensymphony.webwork.validators.DWRValidator;

        DWRValidator.doPost(String, String, Map<String, String>);
        ]]>
    </signatures>
</dwr>

A DWRServlet need to be registered with the web application as well. The following shows a typical web.xml with DWRSerlvet.

<servlet>
    <servlet-name>dwr</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    <init-param>
        <param-name>debug</param-name>
        <param-value>true</param-value>
    </init-param>
</servlet>

<servlet-mapping>
    <servlet-name>dwr</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

Step 1

Create the jsp page. Note the <ww:head ...> tag is used to set the theme which will put in necesary dojo sripts etc. See ajax's theme head.ftl for more information.

<html>
<head>
    <title>Validation - Basic</title>
    <ww:head theme="ajax" debug="true"/>
</head>

<body>
<p>
This quiz (ajax) example is customized to use 2 locale, namely en_US and cn_ZH, as I don't know 
how to write / read chinese, the chinese resource bundle is just like the english but prefixed with (cn)
</p>
<ul>
	<li>
		<ww:url id="url" namespace="/validation" action="quizAjax" method="input">
			<ww:param name="request_locale" value="%{'zh_CN'}" />
		</ww:url>
		To swich to use the chinese resource bundle click <ww:a href="%{#url}">here</ww:a>.
	</li>
	<li>
		<ww:url id="url" namespace="/validation" action="quizAjax" method="input">
			<ww:param name="request_locale" value="%{'en_US'}" />
		</ww:url>
		To swich to use the english resource bundle click <ww:a href="%{#url}">here</ww:a>.
	</li>
</ul>

<p>
The following form uses the labelposition="left"
<ww:form id="f1" action="quizAjax" namespace="/validation" method="post" validate="true" theme="ajax">
    <ww:textfield label="Name" name="name" labelposition="left" />
    <ww:textfield label="Age" name="age" labelposition="left" />
    <ww:textfield label="Favorite color" name="answer" labelposition="left" />
    <ww:submit id="b1" />
</ww:form>
</p>

<p>
The following form uses the labelposition="top"
<ww:form id="f2" action="quizAjax" namespace="/validation" method="post" validate="true" theme="ajax">
    <ww:textfield label="Name" name="name" labelposition="top" />
    <ww:textfield label="Age" name="age" labelposition="top" />
    <ww:textfield label="Favorite color" name="answer" labelposition="top" />
    <ww:submit id="b2"/>
</ww:form> 
</p>

</body>
</html>

Step 2

Create the action class

public class QuizAction extends ActionSupport {
    String name;
    int age;
    String answer;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getAnswer() {
        return answer;
    }

    public void setAnswer(String answer) {
        this.answer = answer;
    }
}

Step 3

Create the validation.xml

<!--
    Add the following DOCTYPE declaration as first line of your XXX-validation.xml file:
    <!DOCTYPE validators PUBLIC "-//OpenSymphony Group//XWork Validator 1.0.2//EN" "http://www.opensymphony.com/xwork/xwork-validator-1.0.2.dtd">
-->
<validators>
    <field name="name">
        <field-validator type="requiredstring">
            <message key="validation.name.required"/>
        </field-validator>
    </field>
    <field name="age">
        <field-validator type="int">
            <param name="min">13</param>
            <param name="max">19</param>
            <message key="validation.age.invalid" />
        </field-validator>
    </field>
</validators>